<template>
  <div class="box">
    <div class="search-box">
      <div>
        <input type="search" placeholder="景区门票" v-model="inputVal">
        <view class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
          <icon type="clear" size="14"></icon>
        </view>
      </div>
      <button>搜索</button>
    </div>
    <div class="result-box">
      <ul class="product-list">
        <li v-for="(item,index) in resultItems" mode="widthFix" :key="index">
          <i><img :src="item.src" alt=""  mode="widthFix" /></i>
          <div>
            <div class="title-box">
              <h5 class="multi-line">{{item.name}}</h5>
              <p>已售：{{item.soldNum}}</p>
            </div>
            <div class="price-box">
              <div>
                <i>￥</i>
                <b>{{item.price}}</b>
                <span>.{{item.point}}</span>
              </div>
              <del>￥{{item.oldPrice}}</del>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  components: {
  },

  data () {
    return {
      inputVal:'',//搜索框输入内容
      resultItems:[
        {src:'http://wx.v4.yunyouyuanfang.com/travel_v4/610b2a66f7884399a77aa1873890eb59.jpg',soldNum:55,name:'特产卤味',oldPrice:'521',price:155,point:0},
        {src:'http://wx.v4.yunyouyuanfang.com/travel_v4/610b2a66f7884399a77aa1873890eb59.jpg',soldNum:55,name:'特产卤味零食大礼包1400g特产卤味零食大礼包1400g特产卤味零食大礼包1400g（鸭舌+鸭掌+熏鸡）藤桥牌礼盒送...',oldPrice:'521',price:155,point:0},
        {src:'http://wx.v4.yunyouyuanfang.com/travel_v4/610b2a66f7884399a77aa1873890eb59.jpg',soldNum:55,name:'特产卤味零食大礼包1400g（鸭舌+鸭掌+熏鸡）藤桥牌礼盒送...',oldPrice:'521',price:155,point:0},
      ],//火
    }
  },

  methods:{
    clearInput() {
      this.inputVal = '';
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../static/css/basis";
  @import "../../../static/css/product";
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 30rpx;
    div {
      position: relative;
      width:540rpx;
      height:80rpx;
      background:rgba(255,255,255,1);
      border:3rpx solid rgba(0,158,58,1);
      border-radius:40rpx;
      input {
        width: 100%;
        height: 100%;
        padding: 0 40rpx;
        font-size: 32rpx;
      }
      .weui-icon-clear {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 0;
        z-index: 5;
      }
    }
    button{
      width:120rpx;
      height:68rpx;
      background:linear-gradient(0deg,rgba(0,158,58,1) 0%,rgba(6,182,65,1) 100%);
      border-radius:34rpx;
      line-height: 68rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
  .result-box {
    padding: 30rpx;
  }
</style>
